<template>
    <!-- #ifdef H5  -->
    <view class="popContainerBox" @touchmove.stop @touch.stop>
    <!-- #endif  -->
	<!-- #ifndef H5  -->
    <view class="popContainerBox">
    <!-- #endif  -->    
        <view :class="{'mask':true,'showPop':showPop}"  @click="hidepop" :style="('z-index:' + zIndex)"></view>
        <view :class="{'popConBox':true,'showPop':showPop,'slideTop':slideTop}" :style="((slideTop ? ('top:0; padding-top:'+ slidetopFixed+'; bottom:auto;') : '') + 'z-index:' + zIndex)">
            <view class="loadBox" v-if="showLoad"><view class="load">Loading...</view> </view> 
            <slot></slot>
        </view>
    </view>
</template>

<script>

export default{
    emits:['hidepop'],
    props:{
        maskClick:{
            type:String,
            default:'',
        },
        showPop:{ //显示弹窗
            type:Boolean,
            default:false, 
        },
        slideTop:{ //从顶部划出
            type:Boolean,
            default:false,
        },
        slidetopFixed:{ //顶部定位
            type:String,
            default:'auto',
        },
        zIndex:{
            type:Number,
            default:200
        },
        showLoad:{ //显示loading
            type:Boolean,
            default:false,
        },
    },
    watch:{
        showPop:function(val){
            const uniPlatform = uni.getSystemInfoSync().uniPlatform; //运行平台
            if(uniPlatform == 'web'){
                if(val){
                    var touch_mo = function(e) {
                        e.preventDefault();
                    };
                    document.body.style.overflow = 'hidden';
                    document.addEventListener("touchmove", touch_mo, false); //禁止页面滑动
                }else{
                    var touch_mo = function(e) {
                        e.preventDefault();
                    };
                    document.body.style.overflow = ''; //出现滚动条
                    document.removeEventListener("touchmove", touch_mo, false);
                }
            }
        },
    },
    methods:{
        hidepop(){
            const tt = this;
            if(tt.maskClick){
                tt.$emit('hidepop',tt.maskClick)
            }
        },
    },
}
</script>
<style>
	@import './bottom_pop.css';
</style>